JavaScript પરફોર્મન્સ ઓપ્ટિમાઇઝેશન: કોડ સ્પ્લિટિંગ વિરુદ્ધ લેઝી ઇવેલ્યુએશન

import React, { Suspense } from 'react';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    

      Loading...
}>
        
      
    

આ ઉદાહરણમાં, OtherComponent ત્યારે જ લોડ થાય છે જ્યારે તે રેન્ડર થાય છે. જ્યારે તે લોડ થઈ રહ્યું હોય, ત્યારે વપરાશકર્તાને "Loading..." સંદેશ દેખાશે.

કોડ સ્પ્લિટિંગ માટેના સાધનો

• Webpack: એક લોકપ્રિય મોડ્યુલ બંડલર જે વિવિધ કોડ સ્પ્લિટિંગ તકનીકોને સમર્થન આપે છે.
• Rollup: બીજું મોડ્યુલ બંડલર જે નાના, કાર્યક્ષમ બંડલ્સ બનાવવા પર ધ્યાન કેન્દ્રિત કરે છે.
• Parcel: એક ઝીરો-કોન્ફિગરેશન બંડલર જે આપમેળે કોડ સ્પ્લિટિંગને હેન્ડલ કરે છે.
• Vite: એક બિલ્ડ ટૂલ જે ઝડપી વિકાસ અને ઑપ્ટિમાઇઝ પ્રોડક્શન બિલ્ડ્સ માટે મૂળ ES મોડ્યુલોનો લાભ લે છે.

લેઝી ઇવેલ્યુએશન: ગણતરીને ટાળવી

લેઝી ઇવેલ્યુએશન શું છે?

લેઝી ઇવેલ્યુએશન, જેને ડેફર્ડ ઇવેલ્યુએશન તરીકે પણ ઓળખવામાં આવે છે, તે એક પ્રોગ્રામિંગ તકનીક છે જ્યાં અભિવ્યક્તિના મૂલ્યાંકનને તેના મૂલ્યની ખરેખર જરૂર ન પડે ત્યાં સુધી વિલંબિત કરવામાં આવે છે. બીજા શબ્દોમાં કહીએ તો, ગણતરીઓ ફક્ત ત્યારે જ કરવામાં આવે છે જ્યારે તેમના પરિણામોની જરૂર હોય, તેના બદલે આગળથી ઉત્સાહથી ગણતરી કરવામાં આવે.

કલ્પના કરો કે તમે મલ્ટી-કોર્સ ભોજન તૈયાર કરી રહ્યા છો. તમે દરેક વાનગી એક જ સમયે રાંધશો નહીં. તેના બદલે, તમે દરેક વાનગી ત્યારે જ તૈયાર કરશો જ્યારે તેને પીરસવાનો સમય હોય. લેઝી ઇવેલ્યુએશન સમાન રીતે કાર્ય કરે છે, ફક્ત ત્યારે જ ગણતરીઓ કરે છે જ્યારે તેમના પરિણામોની જરૂર હોય.

લેઝી ઇવેલ્યુએશન કેવી રીતે કાર્ય કરે છે

JavaScript માં, લેઝી ઇવેલ્યુએશન વિવિધ તકનીકોનો ઉપયોગ કરીને અમલમાં મૂકી શકાય છે:

• ફંક્શન્સ: ફંક્શનમાં અભિવ્યક્તિને લપેટીને તમે ફંક્શનને કૉલ ન કરો ત્યાં સુધી તેના મૂલ્યાંકનને ટાળી શકો છો.
• જનરેટર્સ: જનરેટર્સ માંગ પર મૂલ્યો ઉત્પન્ન કરતા ઇટરેટર બનાવવાની રીત પ્રદાન કરે છે.
• મેમોઇઝેશન: મેમોઇઝેશનમાં ખર્ચાળ ફંક્શન કૉલ્સના પરિણામોને કેશ કરવાનો અને જ્યારે સમાન ઇનપુટ્સ ફરીથી થાય ત્યારે કેશ કરેલું પરિણામ પરત કરવાનો સમાવેશ થાય છે.
• પ્રોક્સીઝ: પ્રોક્સીઝનો ઉપયોગ પ્રોપર્ટી એક્સેસને અટકાવવા અને પ્રોપર્ટી વેલ્યુની ગણતરીને ત્યાં સુધી ટાળવા માટે થઈ શકે છે જ્યાં સુધી તેઓ ખરેખર એક્સેસ ન થાય.

લેઝી ઇવેલ્યુએશનના ફાયદા

• સુધારેલ પરફોર્મન્સ: બિનજરૂરી ગણતરીઓને ટાળીને, લેઝી ઇવેલ્યુએશન પરફોર્મન્સને નોંધપાત્ર રીતે સુધારી શકે છે, ખાસ કરીને જ્યારે મોટા ડેટાસેટ્સ અથવા જટિલ ગણતરીઓ સાથે કામ કરવું હોય.
• ઘટાડેલ મેમરી વપરાશ: લેઝી ઇવેલ્યુએશન મધ્યવર્તી મૂલ્યો બનાવવાનું ટાળીને મેમરી વપરાશ ઘટાડી શકે છે જેની તાત્કાલિક જરૂર નથી.
• વધેલી પ્રતિભાવશીલતા: પ્રારંભિક લોડ દરમિયાન બિનજરૂરી ગણતરીઓને ટાળીને, લેઝી ઇવેલ્યુએશન એપ્લિકેશનની પ્રતિભાવશીલતામાં વધારો કરી શકે છે.
• અનંત ડેટા સ્ટ્રક્ચર્સ: લેઝી ઇવેલ્યુએશન તમને અનંત ડેટા સ્ટ્રક્ચર્સ સાથે કામ કરવાની મંજૂરી આપે છે, જેમ કે અનંત સૂચિઓ અથવા સ્ટ્રીમ્સ, માંગ પર ફક્ત જરૂરી ઘટકોની ગણતરી કરીને.

ઉદાહરણ: લેઝી લોડિંગ છબીઓ

લેઝી ઇવેલ્યુએશન માટેનો એક સામાન્ય ઉપયોગનો કિસ્સો લેઝી લોડિંગ છબીઓ છે. પૃષ્ઠ પરની બધી છબીઓને અપફ્રન્ટ લોડ કરવાને બદલે, તમે વ્યૂપોર્ટમાં શરૂઆતમાં દૃશ્યમાન ન હોય તેવી છબીઓને લોડ કરવાનું ટાળી શકો છો. આ પ્રારંભિક પૃષ્ઠ લોડ સમયને નોંધપાત્ર રીતે સુધારી શકે છે અને નેટવર્ક બેન્ડવિડ્થ વપરાશ ઘટાડી શકે છે.

function lazyLoadImages() {
  const images = document.querySelectorAll('img[data-src]');
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });
  images.forEach((img) => {
    observer.observe(img);
  });
}

document.addEventListener('DOMContentLoaded', lazyLoadImages);

આ ઉદાહરણ IntersectionObserver API નો ઉપયોગ એ શોધવા માટે કરે છે કે છબી ક્યારે વ્યૂપોર્ટમાં પ્રવેશે છે. જ્યારે છબી દૃશ્યમાન હોય, ત્યારે તેનું src એટ્રિબ્યૂટ તેના data-src એટ્રિબ્યૂટના મૂલ્ય પર સેટ કરવામાં આવે છે, જે છબીને લોડ કરવા માટે ટ્રિગર કરે છે. પછી નિરીક્ષક છબીને ફરીથી લોડ થતી અટકાવવા માટે તેનું નિરીક્ષણ કરે છે.

ઉદાહરણ: મેમોઇઝેશન

મેમોઇઝેશનનો ઉપયોગ ખર્ચાળ ફંક્શન કૉલ્સને ઑપ્ટિમાઇઝ કરવા માટે થઈ શકે છે. અહીં એક ઉદાહરણ છે:

function memoize(func) {
  const cache = {};
  return function(...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    }
    const result = func(...args);
    cache[key] = result;
    return result;
  };
}

function expensiveCalculation(n) {
  // Simulate a time-consuming calculation
  for (let i = 0; i < 100000000; i++) {
    // Do something
  }
  return n * 2;
}

const memoizedCalculation = memoize(expensiveCalculation);

console.time('First call');
console.log(memoizedCalculation(5)); // First call - takes time
console.timeEnd('First call');

console.time('Second call');
console.log(memoizedCalculation(5)); // Second call - returns cached value instantly
console.timeEnd('Second call');

આ ઉદાહરણમાં, memoize ફંક્શન ઇનપુટ તરીકે ફંક્શન લે છે અને તે ફંક્શનનું મેમોઇઝ્ડ વર્ઝન પરત કરે છે. મેમોઇઝ્ડ ફંક્શન અગાઉના કૉલ્સના પરિણામોને કેશ કરે છે, જેથી સમાન આર્ગ્યુમેન્ટ્સ સાથેના અનુગામી કૉલ્સ મૂળ ફંક્શનને ફરીથી એક્ઝિક્યુટ કર્યા વિના કેશ કરેલું પરિણામ પરત કરી શકે.

કોડ સ્પ્લિટિંગ વિરુદ્ધ લેઝી ઇવેલ્યુએશન: મુખ્ય તફાવતો

જ્યારે કોડ સ્પ્લિટિંગ અને લેઝી ઇવેલ્યુએશન બંને શક્તિશાળી ઑપ્ટિમાઇઝેશન તકનીકો છે, ત્યારે તેઓ પરફોર્મન્સના વિવિધ પાસાઓને સંબોધે છે:

• કોડ સ્પ્લિટિંગ: કોડને નાના ટુકડાઓમાં વિભાજિત કરીને અને તેમને માંગ પર લોડ કરીને પ્રારંભિક બંડલ કદ ઘટાડવા પર ધ્યાન કેન્દ્રિત કરે છે. તેનો ઉપયોગ મુખ્યત્વે પ્રારંભિક પૃષ્ઠ લોડ સમય સુધારવા માટે થાય છે.
• લેઝી ઇવેલ્યુએશન: જ્યાં સુધી તેમની ખરેખર જરૂર ન હોય ત્યાં સુધી મૂલ્યોની ગણતરીને ટાળવા પર ધ્યાન કેન્દ્રિત કરે છે. તેનો ઉપયોગ મુખ્યત્વે ત્યારે પરફોર્મન્સ સુધારવા માટે થાય છે જ્યારે ખર્ચાળ ગણતરીઓ અથવા મોટા ડેટાસેટ્સ સાથે કામ કરવું હોય.

સારમાં, કોડ સ્પ્લિટિંગ એ કોડની માત્રા ઘટાડે છે જેને અપફ્રન્ટ ડાઉનલોડ કરવાની જરૂર છે, જ્યારે લેઝી ઇવેલ્યુએશન એ ગણતરીની માત્રા ઘટાડે છે જેને અપફ્રન્ટ કરવાની જરૂર છે.

કોડ સ્પ્લિટિંગ વિરુદ્ધ લેઝી ઇવેલ્યુએશનનો ઉપયોગ ક્યારે કરવો

કોડ સ્પ્લિટિંગ

• મોટી એપ્લિકેશન્સ: મોટી માત્રામાં JavaScript કોડ ધરાવતી એપ્લિકેશન્સ માટે કોડ સ્પ્લિટિંગનો ઉપયોગ કરો, ખાસ કરીને બહુવિધ રૂટ્સ અથવા સુવિધાઓ ધરાવતી એપ્લિકેશન્સ માટે.
• પ્રારંભિક લોડ ટાઇમમાં સુધારો: પ્રારંભિક પૃષ્ઠ લોડ સમય સુધારવા અને ક્રિયાપ્રતિક્રિયા કરવાના સમયને ઘટાડવા માટે કોડ સ્પ્લિટિંગનો ઉપયોગ કરો.
• નેટવર્ક બેન્ડવિડ્થ ઘટાડવી: નેટવર્ક પર ટ્રાન્સફર કરવાની જરૂર હોય તેવા ડેટાની માત્રા ઘટાડવા માટે કોડ સ્પ્લિટિંગનો ઉપયોગ કરો.

લેઝી ઇવેલ્યુએશન

• ખર્ચાળ ગણતરીઓ: એવા ફંક્શન્સ માટે લેઝી ઇવેલ્યુએશનનો ઉપયોગ કરો જે ખર્ચાળ ગણતરીઓ કરે છે અથવા મોટા ડેટાસેટ્સને એક્સેસ કરે છે.
• પ્રતિભાવશીલતામાં સુધારો: પ્રારંભિક લોડ દરમિયાન બિનજરૂરી ગણતરીઓને ટાળીને એપ્લિકેશનની પ્રતિભાવશીલતા સુધારવા માટે લેઝી ઇવેલ્યુએશનનો ઉપયોગ કરો.
• અનંત ડેટા સ્ટ્રક્ચર્સ: જ્યારે અનંત ડેટા સ્ટ્રક્ચર્સ સાથે કામ કરતા હો, જેમ કે અનંત સૂચિઓ અથવા સ્ટ્રીમ્સ ત્યારે લેઝી ઇવેલ્યુએશનનો ઉપયોગ કરો.
• લેઝી લોડિંગ મીડિયા: પૃષ્ઠ લોડ ટાઇમ સુધારવા માટે છબીઓ, વિડિયોઝ અને અન્ય મીડિયા એસેટ્સ માટે લેઝી લોડિંગ અમલમાં મૂકો.

કોડ સ્પ્લિટિંગ અને લેઝી ઇવેલ્યુએશનનું સંયોજન

ઘણા કિસ્સાઓમાં, વધુ સારા પરફોર્મન્સ લાભો પ્રાપ્ત કરવા માટે કોડ સ્પ્લિટિંગ અને લેઝી ઇવેલ્યુએશનને જોડી શકાય છે. ઉદાહરણ તરીકે, તમે તમારી એપ્લિકેશનને નાના ટુકડાઓમાં વિભાજીત કરવા માટે કોડ સ્પ્લિટિંગનો ઉપયોગ કરી શકો છો અને પછી તે ટુકડાઓની અંદર મૂલ્યોની ગણતરીને ટાળવા માટે લેઝી ઇવેલ્યુએશનનો ઉપયોગ કરી શકો છો.

ઇ-કોમર્સ એપ્લિકેશનનો વિચાર કરો. તમે ઉત્પાદન સૂચિ પૃષ્ઠ, ઉત્પાદન વિગતો પૃષ્ઠ અને ચેકઆઉટ પૃષ્ઠ માટે અલગ બંડલ્સમાં એપ્લિકેશનને વિભાજિત કરવા માટે કોડ સ્પ્લિટિંગનો ઉપયોગ કરી શકો છો. પછી, ઉત્પાદન વિગતો પૃષ્ઠની અંદર, તમે છબીઓ લોડ કરવાનું અથવા ઉત્પાદન ભલામણોની ગણતરીને ટાળવા માટે લેઝી ઇવેલ્યુએશનનો ઉપયોગ કરી શકો છો જ્યાં સુધી તેઓ ખરેખર જરૂરી ન હોય.

કોડ સ્પ્લિટિંગ અને લેઝી ઇવેલ્યુએશનથી આગળ: વધારાની ઑપ્ટિમાઇઝેશન તકનીકો

જ્યારે કોડ સ્પ્લિટિંગ અને લેઝી ઇવેલ્યુએશન શક્તિશાળી તકનીકો છે, ત્યારે JavaScript પરફોર્મન્સ ઑપ્ટિમાઇઝેશનની વાત આવે ત્યારે તે કોયડાના માત્ર બે ટુકડા છે. અહીં કેટલીક વધારાની તકનીકો છે જેનો ઉપયોગ તમે પરફોર્મન્સને વધુ સુધારવા માટે કરી શકો છો:

• મિનીફિકેશન: તમારા કોડના કદને ઘટાડવા માટે તેમાંથી બિનજરૂરી અક્ષરો (દા.ત., વ્હાઇટસ્પેસ, ટિપ્પણીઓ) દૂર કરો.
• કમ્પ્રેશન: તમારા કોડના કદને વધુ ઘટાડવા માટે Gzip અથવા Brotli જેવા સાધનોનો ઉપયોગ કરીને તેને કમ્પ્રેસ કરો.
• કેશિંગ: તમારા સર્વર પરની વિનંતીઓની સંખ્યા ઘટાડવા માટે બ્રાઉઝર કેશિંગ અને CDN કેશિંગનો લાભ લો.
• ટ્રી શેકિંગ: તમારા બંડલ્સનું કદ ઘટાડવા માટે તેમાંથી ન વપરાયેલ કોડ દૂર કરો.
• ઇમેજ ઑપ્ટિમાઇઝેશન: છબીઓને સંકુચિત કરીને, તેમને યોગ્ય પરિમાણોમાં માપ બદલીને અને WebP જેવા આધુનિક છબી ફોર્મેટનો ઉપયોગ કરીને ઑપ્ટિમાઇઝ કરો.
• ડીબાઉન્સિંગ અને થ્રોટલિંગ: ઇવેન્ટ હેન્ડલર્સ જે દરે એક્ઝિક્યુટ થાય છે તેને નિયંત્રિત કરો જેથી પરફોર્મન્સ સમસ્યાઓ અટકાવી શકાય.
• કાર્યક્ષમ DOM મેનિપ્યુલેશન: DOM મેનિપ્યુલેશન્સને ઓછું કરો અને કાર્યક્ષમ DOM મેનિપ્યુલેશન તકનીકોનો ઉપયોગ કરો.
• વેબ વર્કર્સ: મુખ્ય થ્રેડને અવરોધિત થતો અટકાવવા માટે ગણતરીત્મક રીતે સઘન કાર્યોને વેબ વર્કર્સ પર ઓફલોડ કરો.

નિષ્કર્ષ

JavaScript પરફોર્મન્સ ઑપ્ટિમાઇઝેશન એ સકારાત્મક વપરાશકર્તા અનુભવ પહોંચાડવા અને વ્યવસાયિક લક્ષ્યોને પ્રાપ્ત કરવાનું એક મહત્વપૂર્ણ પાસું છે. કોડ સ્પ્લિટિંગ અને લેઝી ઇવેલ્યુએશન બે શક્તિશાળી તકનીકો છે જે પ્રારંભિક લોડ ટાઇમ ઘટાડીને, નેટવર્ક બેન્ડવિડ્થ વપરાશ ઘટાડીને અને બિનજરૂરી ગણતરીઓને ટાળીને પરફોર્મન્સને નોંધપાત્ર રીતે સુધારી શકે છે. આ તકનીકો કેવી રીતે કાર્ય કરે છે અને તેનો ઉપયોગ ક્યારે કરવો તે સમજીને, તમે ઝડપી, વધુ પ્રતિભાવશીલ અને વધુ આનંદપ્રદ વેબ એપ્લિકેશન્સ બનાવી શકો છો.

તમારી ચોક્કસ એપ્લિકેશનની આવશ્યકતાઓને ધ્યાનમાં રાખવાનું યાદ રાખો અને તમારી જરૂરિયાતો માટે સૌથી યોગ્ય હોય તેવી તકનીકોનો ઉપયોગ કરો. તમારી એપ્લિકેશનના પરફોર્મન્સનું સતત નિરીક્ષણ કરો અને ખાતરી કરો કે તમે શ્રેષ્ઠ સંભવિત વપરાશકર્તા અનુભવ પહોંચાડી રહ્યા છો તેની ખાતરી કરવા માટે તમારી ઑપ્ટિમાઇઝેશન વ્યૂહરચનાઓનું પુનરાવર્તન કરો. કોડ સ્પ્લિટિંગ અને લેઝી ઇવેલ્યુએશનની શક્તિને અપનાવો જેથી વેબ એપ્લિકેશન્સ બનાવી શકાય જે માત્ર સુવિધા-સમૃદ્ધ જ નહીં, પરંતુ વિશ્વભરમાં ઉપયોગમાં લેવા માટે પર્ફોર્મન્ટ અને આનંદદાયક પણ હોય.

વધુ શીખવા માટેના સ્ત્રોતો

• Webpack દસ્તાવેજીકરણ: https://webpack.js.org/
• Rollup દસ્તાવેજીકરણ: https://rollupjs.org/guide/en/
• Vite દસ્તાવેજીકરણ: https://vitejs.dev/
• MDN વેબ ડોક્સ - ઈન્ટરસેક્શન ઓબ્ઝર્વર API: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
• Google Developers - JavaScript એક્ઝિક્યુશન ઑપ્ટિમાઇઝ કરો: https://developers.google.com/web/fundamentals/performance/optimizing-javascript/